<template>
  <!-- 项目变更 -->
  <div class="projectChange-wrap">
    <div class="title-wrap">
      <div class="flex-row title">
        <div class="dot"></div>
        项目变更
      </div>
      <div class="btnProjectTime">
        <el-radio-group v-model="projectTime" size="mini">
          <el-radio-button label="累计">累计</el-radio-button>
          <el-radio-button label="本年">本年</el-radio-button>
          <el-radio-button label="本季">本季</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="content-wrap" style="display:flex;">
      <!-- 左侧统计 -->
      <div class="projectChangeTotal">
        <div class="approval" id="approval-pie"></div>
        <div class="total-wrap1">
          <div class="change-number">
            变更数量
            <span>{{ projecChangeTotal.changeCount }}</span>
            <span>个</span>
          </div>
          <div class="approval-number">
            已批复
            <span>{{ projecChangeTotal.approvalCount }}</span>
            <span>个</span>
          </div>
        </div>
        <div class="total-wrap2">
          <div class="change-number">
            变更总金额
            <span>{{ projecChangeTotal.changeAmount }}</span>
            <span>万元</span>
          </div>
          <div class="approval-number">
            已批复
            <span>{{ projecChangeTotal.approvalAmount }}</span>
            <span>万元</span>
          </div>
        </div>
      </div>
      <!-- 右侧列表 -->
      <div class="projectChangeTable" ref="projectChangeTable">
        <el-table :data="dataList" stripe :height="tableHeight" :header-cell-class-name="headerCellClassFun">
          <el-table-column label="项目名称" width="120" align="center" fixed>
            <template slot="header">
              <div class="project-table-header">项目名称</div>
            </template>
            <template slot-scope="scope">
              <div class="project-table-cell">{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <div class="project-table-header">
                变更数量(个)/
                <span>变更金额(万元)</span>
              </div>
            </template>
            <el-table-column width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div class="project-table-header">
                  总数(数量/
                  <span>金额)</span>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">
                  {{ scope.row.changeCount }}/
                  <span>{{ scope.row.changeAmount }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150" align="center">
              <template slot="header">
                <div class="project-table-header">
                  已批(数量/
                  <span>金额)</span>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">
                  {{ scope.row.approvalCount }}/
                  <span>{{ scope.row.approvalAmount }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150" align="center">
              <template slot="header">
                <div class="project-table-header">
                  未批(数量/
                  <span>金额)</span>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">
                  {{ scope.row.changeCount - scope.row.approvalCount }}/
                  <span>{{ scope.row.changeAmount - scope.row.approvalAmount }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="140" align="center">
              <template slot="header">
                <div class="project-table-header">批复率</div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">{{ ((100 * scope.row.approvalCount) / scope.row.changeCount).toFixed(1) }}%</div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <div class="project-table-header">
                重大变更数量(个)/
                <span>变更金额(万元)</span>
              </div>
            </template>
            <el-table-column width="150" align="center">
              <template slot="header">
                <div class="project-table-header">
                  总数(数量/
                  <span>金额)</span>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">
                  {{ scope.row.change1Count }}/
                  <span>{{ scope.row.change1Amount }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150" align="center">
              <template slot="header">
                <div class="project-table-header">
                  已批(数量/
                  <span>金额)</span>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">
                  {{ scope.row.approval1Count }}/
                  <span>{{ scope.row.approval1Amount }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150" align="center">
              <template slot="header">
                <div class="project-table-header">
                  未批(数量/
                  <span>金额)</span>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">
                  {{ scope.row.change1Count - scope.row.approval1Count }}/
                  <span>{{ scope.row.change1Amount - scope.row.approval1Amount }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="140" align="center">
              <template slot="header">
                <div class="project-table-header">批复率</div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">{{ ((100 * scope.row.approval1Count) / scope.row.change1Count).toFixed(1) }}%</div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <div class="project-table-header">
                较大变更
                <span>变更金额(万元)</span>
              </div>
            </template>
            <el-table-column width="150" align="center">
              <template slot="header">
                <div class="project-table-header">
                  总数(数量/
                  <span>金额)</span>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">
                  {{ scope.row.change2Count }}/
                  <span>{{ scope.row.change2Amount }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150" align="center">
              <template slot="header">
                <div class="project-table-header">
                  已批(数量/
                  <span>金额)</span>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">
                  {{ scope.row.approval2Count }}/
                  <span>{{ scope.row.approval2Amount }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150" align="center">
              <template slot="header">
                <div class="project-table-header">
                  未批(数量/
                  <span>金额)</span>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">
                  {{ scope.row.change2Count - scope.row.approval2Count }}/
                  <span>{{ scope.row.change2Amount - scope.row.approval2Amount }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="140" align="center">
              <template slot="header">
                <div class="project-table-header">批复率</div>
              </template>
              <template slot-scope="scope">
                <div class="project-table-cell">{{ ((100 * scope.row.approval2Count) / scope.row.change2Count).toFixed(1) }}%</div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'projectChange',
  data() {
    return {
      value: '',

      tableHeight: 300,
      projectTime: '累计', //本年  本季
    };
  },

  props: {
    projectId: {
      type: String,
      default: "", // 空为多项目
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },

  computed: {
    projecChangeTotal() {
      let data = {
        changeCount: 0,
        approvalCount: 0,
        changeAmount: 0,
        approvalAmount: 0,
        percent: 0
      };
      this.dataList.forEach(item => {
        data.changeCount += item.changeCount + item.change1Count + item.change2Count;
        data.approvalCount += item.approvalCount + item.approval1Count + item.approval2Count;
        data.changeAmount += item.changeAmount + item.change1Amount + item.change2Amount;
        data.approvalAmount += item.approvalAmount + item.approval1Amount + item.approval2Amount;
      });
      data.changeAmount = (data.changeAmount / 10000).toFixed(2);
      data.approvalAmount = (data.approvalAmount / 10000).toFixed(2);
      data.percent = ((data.approvalCount / data.changeCount) * 100).toFixed(0);
      return data;
    }
  },

  watch: {
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          this.drawContent();
        });
      },
      immediate: true
    },
    dataList: {
      handler() {
        this.$nextTick(() => {
          this.drawContent();
        });
      },
      immediate: true, //其值是true或false；确认是否以当前的初始值执行handler的函数。
      deep: true //其值是true或false；确认是否深入监听
    },

    projectTime: {
      handler(val) {
        this.$emit("onProjectTimeChanged", val)
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.getComputedStyle(this.$refs.projectChangeTable).height;
    });
  },
  methods: {
    drawContent() {
      this.drawApprovalPie()
    },

    drawApprovalPie() {
      console.log("drawApprovalPie")
      var myChart = echarts.init(document.getElementById('approval-pie'));
      let options = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '批复率',
            type: 'gauge',
            radius: '180%',
            startAngle: -180, //开始角度
            endAngle: 0, //结束角度
            // 设置成相对的百分比
            center: ['50%', '90%'],
            axisLine: {
              lineStyle: {
                color: [[0, '#1e70fa'], [1, '#e5efff']],
                width: 18
              },
              roundCap: true //是否在两端显示成圆形
            },
            progress: {
              show: true,
              roundCap: true, //是否在两端显示成圆形
              width: 18
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            itemStyle: {
              show: false
            },
            pointer: {
              show: false //是否显示指针
            },

            detail: {
              formatter: function(value) {
                if (value !== 0) {
                  var num = Math.round(value);
                  return parseInt(num).toFixed(0) + '%';
                } else {
                  return '0%';
                }
              },
              offsetCenter: [0, -30],
              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 20,
                fontWeight: '700',
                color: '#000'
              }
            },
            title: {
              //标题
              show: true,
              offsetCenter: [0, -6], // x, y，单位px
              fontSize: 14, //表盘上的标题文字大小
              fontWeight: 400,
              fontFamily: 'PingFangSC',
              color: '#000'
            },
            data: [
              {
                name: '批复率',
                value: this.projecChangeTotal.percent
              }
            ],
            animationDuration: 4000
          }
        ]
      };
      // 绘制图表
      myChart.setOption(options);
    },

    headerCellClassFun({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return 'head-cell1';
      } else if (column.level == 1 && columnIndex % 2 == 1) {
        return 'head-cell1';
      } else if (column.level == 1 && columnIndex % 2 == 0) {
        return 'head-cell2';
      } else if (column.level == 2 && parseInt(columnIndex / 4) % 2 == 1) {
        return 'head-cell2';
      } else if (column.level == 2 && parseInt(columnIndex / 4) % 2 == 0) {
        return 'head-cell1';
      }
    },

    timeFormat(Date, fmt = 'yyyy-MM-dd') {
      // "yyyy-MM-dd hh:mm:ss.S" ==> 2006-07-02 08:09:04.423
      // "yyyy年M-d h:m:s.S"      ==> 2006年7-2 8:9:4.18
      if (typeof Date === 'string') {
        Date = new window.Date(Date.replace(/-/g, '/'));
      }
      if (!(Date instanceof window.Date)) {
        console.log('时间格式化失败');
        return '';
      }
      const o = {
        'M+': Date.getMonth() + 1,
        'd+': Date.getDate(),
        'h+': Date.getHours(),
        'm+': Date.getMinutes(),
        's+': Date.getSeconds(),
        'q+': Math.floor((Date.getMonth() + 3) / 3)
        // 'S': Date.getMilliseconds()
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (Date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
        }
      }
      return fmt;
    }

  }
};
</script>
<style lang="scss" scoped>
.flex-row {
  display: flex;
  flex-direction: row;
}

.meter_analysis {
  font-family: Microsoft YaHei-Regular;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .projectChange-wrap {
    width: 100%;
    height: 460px;
    margin-bottom: 23px;
    margin-top: 22px;
    background-color: #fff;
    border-radius: 15px;
    padding: 16px 24px 24px 24px;
  }

  .title-wrap {
    display: flex;
    height: 45px;
    border-bottom: 1px #e6e8ef solid;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    align-items: center;

    .title {
      display: flex;
      flex-direction: row;
      font-weight: bold;
      font-size: 16px;
      flex-shrink: 0;
      align-items: center;
      .dot {
        height: 4px;
        width: 4px;
        background-color: #005fff;
        border-radius: 4px;
        margin-right: 8px;
      }
    }

    .btnProjectTime {
      color: #666666;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .content-wrap {
    height: calc(100% - 55px);
    width: 100%;
    overflow-y: auto;
  }

  .projectChangeTotal {
    margin-right: 40px;
    width: calc(100% - 1524px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .approval {
      margin: 5px auto;
      width: 200px;
      height: 100px;
    }
    .total-wrap1 {
      background: url("~@/assets/images/workbench/projectChange-icon.png") 0 0 /
        100% 100% no-repeat;
      height: 100px;
      width: 100%;
      margin-bottom: 18px;
      margin-top: 18px;
    }

    .total-wrap2 {
      background: url("~@/assets/images/workbench/projectChange-icon2.png") 0 0 /
        100% 100% no-repeat;
      height: 100px;
      width: 100%;
      margin-bottom: 18px;
    }

    .total-wrap1,
    .total-wrap2 {
      padding-left: 31px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .change-number {
        color: #808080;
        font-size: 14px;
        margin-bottom: 15px;
        span:first-of-type {
          font-size: 28px;
          font-weight: 900;
          color: #000000;
          display: inline-block;
          margin-left: 15px;
        }
        span:last-of-type {
          font-size: 14px;
          color: #000000;
          padding-left: 6px;
        }
      }

      .approval-number {
        color: #808080;
        font-size: 14px;
        span:first-of-type {
          font-size: 20px;
          font-weight: 900;
          color: #1e70fa;
          display: inline-block;
          margin-left: 12px;
        }
        span:last-of-type {
          font-size: 14px;
          color: #000000;
          padding-left: 6px;
        }
      }
    }
  }

  .projectChangeTable {
    width: 1484px;
    height: 360px;

    .project-table-header {
      font-size: 16px;
      font-weight: bold;
      margin: 0 auto;
      color: #000000;
      & > span {
        color: #1e70fa !important;
      }
    }

    .project-table-cell {
      font-size: 16px;
      margin: 0 auto;
      color: #000000;
      & > span {
        color: #1e70fa !important;
      }
    }
  }

  ::v-deep .head-cell1 {
    background-color: #f3f8ff !important;
  }

  ::v-deep .head-cell2 {
    background-color: #e8f0fc !important;
  }
}
</style>
